<template>
  <div>
    <div class="navs">
      <router-link to="/home" class="item">
        <div><i class="iconfont icon-shouyefill"></i></div>
        <span>首页</span>
      </router-link>
      <router-link to="/category" class="item">
        <div><i class="iconfont icon-fenlei"></i></div>
        <span>分类</span>
      </router-link>
      <router-link to="/buy" class="item">
        <div><i class="iconfont icon-24gf-bag"></i></div>
        <span>值得买</span>
      </router-link>
      <router-link to="/car" class="item">
        <div><i class="iconfont icon-gouwuche"></i></div>
        <span>购物车</span>
      </router-link>
      <router-link to="/my" class="item">
        <div><i class="iconfont icon-wode-wode"></i></div>
        <span>我的当当</span>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less">
.navs {
  min-width: 375px;
  max-width: 750px;
  // height: 40px;
  display: flex;
  background-color: #fcfcfc;
  box-sizing: border-box;
  .item {
    flex: 1;
    text-align: center;
    font-size: 15px;
    div{
      margin-top: 3px;
      i{
        font-size: 20px;
      }
    }
    span {
      display: inline-block;
      // height: 21px;
      // line-height: 21px;
      border-bottom: 1px solid transparent;
      color: #605d62;
    }
    &.router-link-active span {
      font-weight: bold;
      color: red;
    }
    &.router-link-active div i{
      color: red;
    }
  }
}
</style>